<template>
    <div class="default-main">
        <el-row v-loading="state.loading" :gutter="20">
            <el-col :span="12">
                <el-tabs type="border-card" v-model="state.active">
                    <el-tab-pane class="config-tab-pane" label="配置管理" name="mp">
                        <el-form label-position="top" ref="formRef" :rules="rulesMp" :model="state.mp" label-width="120px">
                            <FormItem label="APPID" type="string" prop="appid" placeholder="请输入公众号的APPID" v-model="state.mp.appid" />
                            <FormItem label="SECRET" type="string" prop="secret" placeholder="请输入公众号的SECRET" v-model="state.mp.secret" />
                            <FormItem label="日志" type="switch" v-model="state.mp.log" :input-attr="{ size: 'large' }" />
                            <el-button style="margin-top: 15px" :loading="state.loading" @click="onSubmitMp(formRef)" type="primary">提交</el-button>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import FormItem from '/@/components/formItem/index.vue'
import { getConfig, saveConfig } from '/@/api/backend/mpnotice/common'
import type { FormInstance, FormRules } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'

const formRef = ref<FormInstance>()
const state = reactive({
    loading: true,
    mp: {
        appid: '',
        secret: '',
        log: 0,
    },
    active: 'mp',
})

const rulesMp = reactive<FormRules>({
    appid: [buildValidatorData({ name: 'required', message: '请输入公众号的APPID' })],
    secret: [buildValidatorData({ name: 'required', message: '请输入公众号的SECRET' })],
})

const onSubmitMp = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            // 验证通过
            state.loading = true
            saveConfig(state.mp).finally(() => {
                state.loading = false
            })
        }
    })
}

const getIndex = () => {
    getConfig()
        .then((res) => {
            state.mp = res.data.mp
            state.loading = false
        })
        .catch(() => {
            state.loading = false
        })
}

onMounted(() => {
    getIndex()
})
</script>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'xzshop/config',
})
</script>

<style scoped lang="scss">
.el-tabs--border-card {
    border: none;
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-border-radius-base);
}

.el-tabs--border-card :deep(.el-tabs__header) {
    background-color: var(--ba-bg-color);
    border-bottom: none;
    border-top-left-radius: var(--el-border-radius-base);
    border-top-right-radius: var(--el-border-radius-base);
}

.el-tabs--border-card :deep(.el-tabs__item.is-active) {
    border: 1px solid transparent;
}

.el-tabs--border-card :deep(.el-tabs__nav-wrap) {
    border-top-left-radius: var(--el-border-radius-base);
    border-top-right-radius: var(--el-border-radius-base);
}

.el-card :deep(.el-card__header) {
    height: 40px;
    padding: 0;
    line-height: 40px;
    border: none;
    padding-left: 20px;
    background-color: var(--ba-bg-color);
}
</style>
